<template>
  <view class="container">
    <view
      class="button"
      :class="{ selected: value, unselected: !value }"
      @click="toggleSelection"
    >
      <text class="check-mark" v-if="value">√</text>
    </view>
    <view style="margin-left: 10rpx">{{ txt }}</view>
  </view>
</template>

<script>
export default {
  name: "LiChecksingle",
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    txt: {
      type: String,
      default: "",
    },
  },
  methods: {
    toggleSelection() {
      this.$emit("input", !this.value);
      this.$emit("change", !this.value);

    },
  },
};
</script>

<style>
.container {
  display: inline-flex;
  align-items: center;
  margin-right: 10rpx;
}

.button {
  width: 30rpx;
  height: 30rpx;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selected {
  background-color: #f5bf51;
}

.unselected {
  background-color: #ffffff;
  border: 1rpx solid #000;
}

.check-mark {
  font-size: 18px;
  color: #ffffff;
}
</style>
